import React, { Fragment, useEffect } from 'react';
import * as d3 from 'd3';
import { Card, Content } from 'react-fule-ui';
// import { text } from 'd3';
// 假数据
const title = '我是标题';
const data = [
  { name: '红红', number: 18 },
  { name: '绿绿', number: 120 },
  { name: '泡泡', number: 9 },
  { name: '果果', number: 1 },
  { name: '红泡泡', number: 9 },
  { name: '绿果果', number: 6 },
  { name: '小明', number: 3 },
  { name: '小绿绿', number: 4 },
  { name: '小果果', number: 10 },
  { name: '花花', number: 5 },
  { name: '小张', number: 12 },
  { name: '小结', number: 16 },
  { name: '二狗子', number: 9 },
];
export default function PluginsD3() {
  // const anchoRef = useRef(null);
  // 设置参数
  const width = 800; // 总宽度
  const height = 400; // 总高度
  const MaxValue =
    d3.max(data, (d) => d.number) > 110 ? d3.max(data, (d) => d.number) : 110; // 设置数值最大数
  const barColor = '#276419'; // 颜色
  const margin = { top: 80, right: 20, bottom: 40, left: 30 }; // 设置绘画图表的间距
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const parameter = { title, data, width, height, barColor, margin, MaxValue };

  // 函数 - 创建 bar Chart
  const DrawChart = (parameter) => {
    // 参数
    const {
      title = '',
      width = 200,
      height = 200,
      barColor = '#ccc',
      margin = { top: 40, right: 20, bottom: 40, left: 30 },
      MaxValue = d3.max(data, (d) => d.number),
    } = parameter;
    const svg = d3
      .select('#svgD3')
      .append('svg')
      .attr('width', width)
      .attr('height', height);
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;

    // 设置x轴的最大最小值
    const xScale = d3
      .scaleBand() //  scaleBand可以帮助我们来决定bar的几何形状，并且已经考虑好了各个bar之间的padding值
      .domain(data.map((d) => d.name)) // 获取y轴的值，data.map
      .range([0, innerWidth]) // 坐标宽度
      .paddingInner(0) // 指定每个频带之间的填充量（以频带宽度的百分比表示）
      .paddingOuter(0.2); // 指定第一个频带之前和最后一个频带之后的填充量（以频带宽度的百分比表示）
    // 设置y轴的最大最小值
    const yScale = d3
      .scaleLinear()
      .domain([MaxValue, 0]) // 获取数据中的最大值，d=>d.number是一个回调函数
      .range([0, innerHeight]); // 坐标高度

    // 线的区域
    const barLine = svg
      .append('g')
      .attr('class', 'barLine')
      .attr('x', margin.left)
      .attr('y', margin.top);

    // 创建柱状图绘画区域
    const bar = svg.append('g').attr('class', 'bar');
    // X 轴
    const axisX = svg.append('g').attr('class', 'axisBottom');
    // Y 轴
    const axisY = svg.append('g').attr('class', 'axisLeft');

    // 背景
    barLine
      .append('rect')
      .attr('width', innerWidth)
      .attr('height', innerHeight)
      .attr('x', margin.left)
      .attr('y', margin.top)
      .attr('fill', '#ccc')
      .attr('opacity', '0.2');
    // 创建柱状图
    data.forEach((d, i) => {
      const item = bar.append('g');
      // 线
      // barLine
      //   .append('line')
      //   .attr('x1',margin.left)
      //   .attr('y1',margin.top + i * innerHeight/data.length)
      //   .attr('x2',margin.left + innerWidth)
      //   .attr('y2',margin.top + i * innerHeight/data.length)
      //   .attr("stroke", "#ccc")
      //   .attr("stroke-width", "1px");
      // 条形图
      // item
      //   .append("rect")
      //   .attr("width", xScale.bandwidth() / 2) //条形柱状的宽度
      //   .attr("fill", barColor)
      //   .attr("x", xScale(d.name) + margin.left + xScale.bandwidth() / 4)
      //   .attr("y", yScale(d.number) + margin.top)
      //   .attr("transform", `rotate(-90)`)
      //   .transition()
      //   .duration(1000)
      //   .delay((d, i)=>{
      //     return i * 200;
      //   })
      //   .attr("height", innerHeight - yScale(d.number))
      //   .attr("height", 0)
      item
        .append('polygon')
        .attr('fill', barColor)
        .attr(
          'points',
          `
          ${xScale(d.name) + margin.left + xScale.bandwidth() / 4},${yScale(d.number) + margin.top + innerHeight - yScale(d.number)
          } 
          ${xScale(d.name) +
          margin.left +
          xScale.bandwidth() / 4 +
          xScale.bandwidth() / 2
          },${yScale(d.number) + margin.top + innerHeight - yScale(d.number)}
          ${xScale(d.name) +
          margin.left +
          xScale.bandwidth() / 4 +
          xScale.bandwidth() / 2
          },${yScale(d.number) + margin.top + innerHeight - yScale(d.number)}
          ${xScale(d.name) + margin.left + xScale.bandwidth() / 4},${yScale(d.number) + margin.top + innerHeight - yScale(d.number)
          }
        `
        )
        .transition()
        .duration(1000)
        .delay((d, i) => i * 200)
        .attr(
          'points',
          `
          ${xScale(d.name) + margin.left + xScale.bandwidth() / 4},${yScale(d.number) + margin.top
          } 
          ${xScale(d.name) +
          margin.left +
          xScale.bandwidth() / 4 +
          xScale.bandwidth() / 2
          },${yScale(d.number) + margin.top}
          ${xScale(d.name) +
          margin.left +
          xScale.bandwidth() / 4 +
          xScale.bandwidth() / 2
          },${yScale(d.number) + margin.top + innerHeight - yScale(d.number)}
          ${xScale(d.name) + margin.left + xScale.bandwidth() / 4},${yScale(d.number) + margin.top + innerHeight - yScale(d.number)
          }
        `
        );
      // 添加文案
      item
        .append('text')
        .text(d.number)
        .attr('x', xScale(d.name) + margin.left + xScale.bandwidth() / 4)
        .attr('y', yScale(d.number) + margin.top - 6)
        .attr('fill', '#333')
        .style('font-size', '12px')
        .attr('text-anchor', 'middle')
        .attr('dx', xScale.bandwidth() / 4);
    });
    // 创建 X 轴坐标
    axisX
      .call(d3.axisBottom().scale(xScale))
      .attr(
        'transform',
        `translate(${margin.left},${innerHeight + margin.top})`
      )
      // 坐标上字体旋转
      .selectAll('text')
      .style('text-anchor', 'end')
      .attr('dx', '-.8em')
      .attr('dy', '.15em')
      .attr('transform', 'rotate(-50)');

    // 创建 Y 轴坐标
    axisY
      .attr('class', 'axisLeft')
      .call(d3.axisLeft().scale(yScale))
      .attr('transform', `translate(30, ${margin.top})`);

    // 创建标题
    svg
      .append('g')
      .attr('class', 'title')
      .append('text')
      .text(title)
      .attr('x', width / 2)
      .attr('y', 14)
      .attr('text-anchor', 'middle')
      .attr('fill', '#333')
      .style('font-size', '16px');

    // 创建副标题
    svg
      .append('g')
      .attr('class', 'subtitle')
      .append('text')
      .text(title)
      .attr('x', width / 2)
      .attr('y', 38)
      .attr('text-anchor', 'middle')
      .attr('fill', '#333')
      .style('font-size', '12px');
  };

  // 运行函数
  useEffect(() => {
    DrawChart(parameter);
  }, [parameter]);
  return (
    <Fragment>
      <Content>
        <Content.Header>D3</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>柱状图 (bar chart)</Card.Header>
            <Card.Body>
              <div id="svgD3"></div>
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
